<template>
    <van-nav-bar title="基本资料" left-text="返回" left-arrow @click-left="onBack" fixed />

    <div class="h50"></div>
    <div class="user">
        <div class="user-image">
            <van-image round :src="business.avatar_cdn" />
        </div>
    </div>
    <div class="form">
        <van-form @submit="onProfile" label-align="right" colon>
            <van-field v-model="business.mobile" name="mobile" label="手机号" placeholder="手机号" readonly />

            <van-field v-model="business.nickname" name="nickname" label="昵称" placeholder="昵称"
                :rules="[{ required: true, message: '昵称不能为空' }]" />

            <van-field v-model="business.email" name="email" label="邮箱" placeholder="邮箱"
                :rules="[{ required: true, message: '邮箱不能为空' }]" />

            <van-field v-model="business.password" type="password" name="password" label="密码" placeholder="密码为空不修改" />

            <van-field name="gender" label="性别">
                <template #input>
                    <van-radio-group v-model="business.gender" direction="horizontal">
                        <van-radio name="0">保密</van-radio>
                        <van-radio name="1">男</van-radio>
                        <van-radio name="2">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <van-field v-model="business.region_text" is-link readonly name="area" label="地区选择" placeholder="选择省市区"
                @click="showRegion = true" />

            <!-- 弹出层 + 地区选择组件 -->
            <van-popup v-model:show="showRegion" round position="bottom">
                <van-area title="地区选择" v-model="code" :area-list="areaList" @confirm="onRegionConfirm"
                    @cancel="showRegion = false" />
                    
            </van-popup>

            <van-field name="avatar" label="头像">
                <template #input>
                    <van-uploader v-model="avatar" :max-count="1" />
                </template>
            </van-field>

            <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import { areaList } from '@vant/area-data';
// 获取当前组件实例
const { proxy } = getCurrentInstance();
const business = ref(proxy.$cookies.get('business'));
const showRegion = ref(false);

//头像显示方法
const avatar = ref([
    { url: business.value.avatar_cdn }
])

//表单提交事件
const onProfile = async (values) => {
    console.log(values);
    //封装数据
    let data = {
        busid: business.value.id,
        //手机号码
        nickname: values.nickname.trim(),
        //邮箱
        email: values.email.trim(),
        //性别
        gender: values.gender
    }

    //判断一下有没有选择地区
    if (code.value) {
        data.code = code.value;
    }

    //密码
    if (values.password) {
        data.password = values.password;
    }
    //处理头像
    if (values.avatar[0].file) {
        data.avatar = values.avatar[0].file;
    }

    let result = await proxy.$Api.profile(data);
    console.log(result);
    if (result && result.code === 1) {
        proxy.$showNotify({
            type: 'success',
            message: result.msg,
            duration: 2000,
            onClose: () => {
                //成功返回上一页
                proxy.$router.back();
            }
        });

        return;
    } else {
        proxy.$showNotify({
            type: 'warning',
            message: result.msg,
            duration: 2000,
        });

        return;
    }
}

const code = ref(business.value.district ? business.value.district : business.value.city ? business.value.city : business.value.province);
//地址确认后要做什么
const onRegionConfirm = ({ selectedOptions }) => {
    let [province, city, district] = selectedOptions;

    //console.log([province, city, district]);
    let regionText = '';
    let regionCode = null;

    //判断里面的值是否存在如果存在就执行
    if (province.value) {
        regionText = province.text + '-';
        regionCode = province.value;
    }

    if (city.value) {
        regionText += city.text + '-';
        regionCode = city.value;
    }

    if (district.value) {
        regionText += district.text;
        regionCode = district.value;
    }

    code.value = regionCode;
    business.value.region_text = regionText;
    showRegion.value = false;
};

const onBack = () => {
    // 定义返回函数，实现返回效果
    proxy.$router.back();
}
</script>
<style>
@import url('/assets/css/profile.css');
</style>